<template>
  <div class="editUser">
    <div class="editUserLeft">
      <el-icon>
        <Tickets />
      </el-icon>
      <span>数据列表</span>
    </div>
    <div class="editUserRight">
      <el-button
        @click="router.push('/pms/updateProductCate')"
        v-permission="'addProductCate'"
        >添加</el-button
      >
    </div>
  </div>
  <el-table :data="list" table-layout="auto" cell-class-name="align-c" border>
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="name" label="分类名称" />
    <el-table-column label="级别">{{
      $route.query.parentId ? "二级" : "一级"
    }}</el-table-column>
    <el-table-column prop="productCount" label="商品数量" />
    <el-table-column prop="description" label="数量单位" />
    <el-table-column prop="" label="导航栏">
      <template #default="{ row }">
        <el-switch
          v-model="row.navStatus"
          :active-value="1"
          :inactive-value="0"
          @change="updateNavStatus(row)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="" label="是否显示">
      <template #default="{ row }">
        <el-switch
          v-model="row.showStatus"
          :active-value="1"
          :inactive-value="0"
          @change="updateShowStatus(row)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" />
    <el-table-column prop="description" label="设置">
      <template #default="{ row }">
        <el-button @click="search(row.id)" :disabled="params.parentId !== 0"
          >查看下级</el-button
        >
        <el-button>转移商品</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="description" label="操作">
      <template #default="{ row }">
        <el-button
          @click="router.push(`/pms/updateProductCate?id=${row.id}`)"
          v-permission="'updateProductCate'"
          >编辑</el-button
        >
        <el-button type="danger" @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </ElConfigProvider>
  </div>
</template>
<script setup lang="ts">
import {
  productCategoryListApi,
  deleteProductCategoryApi,
  updateProductCategoryNavStatusApi,
  updateProductShowStatusCategoryApi,
} from "./api";
import { Tickets } from "@element-plus/icons-vue";
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";

const router = useRouter();
const list = ref<IProductCategoryList[]>([]);
const total = ref(0);
const params = reactive<IProductCategoryParamsModel>({
  // route.query.parentId ? Number(route.query.parentId) :
  parentId: 0,
  pageNum: 1,
  pageSize: 5,
});

const getList = () => {
  productCategoryListApi(params).then((res) => {
    if (res.code === 200) {
      list.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
getList();

const pageChangeHandle = () => {
  getList();
};
const pageSizeChangeHandle = () => {
  getList();
};
const del = (id: number) => {
  ElMessageBox.confirm("确定要删除商品分类吗？", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteProductCategoryApi(id).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          getList();
        }
      });
    })
    .catch(() => {});
};
const search = (id: number) => {
  router.push(`/pms/productCate/?parentId=${id}`);
  params.parentId = id;
  getList();
};
//更新导航栏状态
const updateNavStatus = (row: IProductCategoryList) => {
  updateProductCategoryNavStatusApi({
    ids: [row.id],
    navStatus: row.navStatus,
  })
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("操作成功");
      } else {
        row.navStatus = row.navStatus === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      row.navStatus = row.navStatus === 1 ? 0 : 1;
    });
};
//更新显示状态
const updateShowStatus = (row: IProductCategoryList) => {
  updateProductShowStatusCategoryApi({
    ids: [row.id],
    showStatus: row.showStatus,
  })
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
      } else {
        row.showStatus = row.showStatus === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      row.showStatus = row.showStatus === 1 ? 0 : 1;
    });
};
router.beforeEach((to, from, next) => {
  if (to.path === "/pms/productCate") {
    params.parentId = 0;
    getList();
    next();
  }
  next();
});
</script>

<style lang="less" scoped>
:deep(.align-c) {
  .cell {
    text-align: center;
  }
}
.editUser {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  align-items: center;
}
.page {
  display: flex;
  flex-direction: row-reverse;
}
</style>
